<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>衣服生成器 for RPG Maker</title>
        <!--
        <script src="http://cdn.bootcss.com/pixi.js/4.0.0-rc3/pixi.js"></script>
        <script src="http://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
        -->
        <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="static/css/bootstrap-slider.css">
        <link rel="stylesheet" type="text/css" href="static/css/clothes.css">
        <link rel="stylesheet" type="text/css" href="static/css/font-awesome.css">
        <script src="static/js/jquery.js"></script>
        <script src="static/js/bootstrap.js"></script>
        <script src="static/js/bootstrap-slider.js"></script>
        <script src="static/js/pixi.js"></script>
        <script src="static/js/pixi-picture.js"></script>
        <script src="static/js/pixi-tilemaps.js"></script>

        <script src="static/js/core.js"></script>
        <script src="static/js/manager.js"></script>



    </head>
    <body>

    <div id="overlay">
        <div id="background"></div>
        <div id="info">
            <div style="font-size:1.2em">加载基础文件中……</div>
            <div class="progress-container">
            <div class="progress progress-striped active">
             <div class="progress-bar" id="progress1" style="width: 0%;"></div>
            </div>
            </div>
        </div>
    </div>



    <div class="container">
    <!--
    <div class="row">
        <div class="col-lg-12">
            <div class="page-header">
                <h3>衣服生成器 for RPG Maker</h3>
            </div>
        </div>
    </div>
    -->
    <div class="top-bottom"></div>
        <div class="row" style="height:800px">
            <div class="col-lg-8" style="height:100%">
                <div class="panel panel-primary" id="model_list_parent">
                    <div class="panel-heading">
                        模型
                    </div>

                    <div class="panel-body choies-list" id="model_list"></div>
                </div>
                <div class="panel panel-primary" id="pattern_list_parent">
                    <div class="panel-heading">
                        花纹
                    </div>

                    <div class="panel-body choies-list" id="pattern_list"></div>
                </div>
            </div>
            <div class="col-lg-4" style="height:100%">
                <div class="panel panel-primary" id="result_parent">
                    <div class="panel-heading">效果</div>

                    <div class="panel-body" id="result">
                        <table class="table table-bordered">
                        <thead>
                            <td>微调坐标</td>
                            <td>预览</td>
                        </thead>
                            <tr>
                                <td>
                                    <div class="pull-right">
                                    <div class="col-xs-4" id="operate_y">
                                    <div></div>
                                        <div>
                                        <button class="btn btn-default btn-sm" onclick="pullPosUp(-1);">
                                            <i class="icon icon-chevron-up"></i>
                                        </button>
                                        </div>
                                        <div>
                                        <button class="btn btn-default btn-sm" onclick="pullPosUp(1);">
                                            <i class="icon icon-chevron-down"></i>
                                        </button>
                                        </div>
                                    <div></div>

                                    </div>
                                        <div class="col-xs-8" id="result_operate">
                                        <div>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(0,-1)">
                                                <i class="icon icon-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(0,1)">
                                                <i class="icon icon-chevron-right"></i>
                                            </button>
                                        </div>
                                        <div>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(1,-1)">
                                                <i class="icon icon-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(1,1)">
                                                <i class="icon icon-chevron-right"></i>
                                            </button>
                                        </div>
                                        <div>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(2,-1)">
                                                <i class="icon icon-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(2,1)">
                                                <i class="icon icon-chevron-right"></i>
                                            </button>
                                        </div>
                                        <div>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(3,-1)">
                                                <i class="icon icon-chevron-left"></i>
                                            </button>
                                            <button class="btn btn-default btn-sm" onclick="pullPos(3,1)">
                                                <i class="icon icon-chevron-right"></i>
                                            </button>
                                        </div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div id="result_show"></div>
                                </td>

                            </tr>
                        </table>
                        
                        
                    </div>
                </div>

                <div class="panel panel-primary" id="operation_parent">
                    <div class="panel-heading">操作</div>

                    <div class="panel-body" id="operation">
                        <p>
                            <b>色相：</b>
                            <input type="text" class="span2" value="0" data-slider-min="0" data-slider-max="360" data-slider-step="1" data-slider-value="0" data-slider-id="RC" id="hue" data-slider-tooltip="hide" data-slider-handle="square" />
                        </p>
<br>
                        <p>

                            <b>明亮：</b>
                            <input type="text" class="span2" value="128" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="128" data-slider-id="RC" id="bright" data-slider-tooltip="hide" data-slider-handle="square" />
                        </p>
                        <br>
                        <div >
                        <div style="text-align:right">
                            <button class="btn btn-primary" onclick="download()">
                                <i class="icon-download-alt"></i>
                            下载(3x4)</button>
                            <button class="btn btn-primary" onclick="download4x4()">
                                <i class="icon-download-alt"></i>
                            下载(4x4)</button>
                            <a id="file" download="aaa.png"></a>
                        </div>

                        <div>
       
                        </div>
                    </div>
                    <div id="loadAllHue" style="display:none;margin-top:1em;text-align:center;">
                        <div class="progress progress-striped active">
                         <div class="progress-bar" id="progress2" style="width: 0%;"></div>
                        </div>
                        <p id="pre_read_info">预读一些操作会用到的数据……<br>（进度条完成期间，可以操作）</p>
                    </div>

                </div>

            </div>

        </div>
    </div>



            <script src="static/js/main.js"></script>

            <div class="row">
                <div class="col-lg-12">
                <div style="height:30px"></div>
                <div class="page-footer" style="text-align:center;font-size:1.5em">
                    <a href="https://rpg.blue/forum.php?mod=viewthread&tid=395473">来帮忙贡献你绘制的模型或花纹</a>
                </div>
                    <div style="text-align:center">
                        <a href="https://github.com/garfeng/clothes">在Github上查看</a> | <a href="https://rpg.blue">Project1</a>
                    </div>
                </div>
            </div>
    <div class="top-bottom"></div>

    </body>
</html>